<template>
  <div class="medal">
    <el-row :gutter="24">
      <el-col :span="11" style="width: 750px;">
        <el-tabs type="border-card" style=" background-color:rgba(250,250,250,0.5)">
          <el-tab-pane label="已完成">
            <div>
              <el-popover placement="right" trigger="hover" v-for="(item, i) in data1" :key="i">
                <div class="hover">
                  <p>下单时间：{{ item.order.orderCreateTime }}</p>
                  <a
                    @click="
                      routerTo(
                        '/detail/',
                        item.product.productCategory,
                        item.product.productId
                      )
                    "
                  >点击查看商品详细信息</a>
                </div>
                <div class="goods" slot="reference">
                  <!-- <el-image
                    class="img"
                    :src="item.product.productHomeImageUrl"
                  ></el-image>-->
                  <img :src="item.product.productHomeImageUrl" alt />
                  <div class="detail">
                    <h5 style="margin-bottom: 4px;">{{ item.product.productName }}</h5>
                    <span class="s1">{{ item.productSku.productSkuDesc }}</span>
                    <br />
                    <span class="s2">X{{ item.order.orderNumber }}</span>
                  </div>
                  <div class="price">￥{{ item.order.orderAmount }}</div>
                </div>
              </el-popover>
            </div>
          </el-tab-pane>
          <el-tab-pane label="运输中">
            <div>
              <el-popover placement="right" trigger="hover" v-for="(item, i) in data12" :key="i">
                <div class="hover">
                  <p>下单时间：{{ item.order.orderCreateTime }}</p>
                  <a
                    @click="
                      routerTo(
                        '/detail/',
                        item.product.productCategory,
                        item.product.productId
                      )
                    "
                  >点击查看商品详细信息</a>
                  <br />
                  <!-- <el-popover placement="bottom" width="300" trigger="click">
                    <el-timeline>
                      <el-timeline-item
                        v-for="(activity, index) in item.logistics"
                        :key="index"
                        :timestamp="activity.timestamp"
                        style="font-size: 1vw;"
                      >
                        {{ activity.content }}
                      </el-timeline-item>
                    </el-timeline>
                    <el-button class="btn" slot="reference"
                      >点击查看物流详细信息</el-button
                    >
                  </el-popover>-->
                </div>
                <div class="goods" slot="reference">
                  <!-- <el-image
                    class="img"
                    :src="item.product.productHomeImageUrl"
                  ></el-image>-->
                  <img :src="item.product.productHomeImageUrl" alt />
                  <div class="detail">
                    <h5 style="margin-bottom: 4px;">{{ item.product.productName }}</h5>
                    <span class="s1">{{ item.productSku.productSkuDesc }}</span>
                    <br />
                    <span class="s2">X{{ item.order.orderNumber }}</span>
                  </div>
                  <div class="price">￥{{ item.order.orderAmount }}</div>
                </div>
              </el-popover>
            </div>
          </el-tab-pane>
          <el-tab-pane label="未发货">
            <div>
              <el-popover placement="right" trigger="hover" v-for="(item, i) in data13" :key="i">
                <div class="hover">
                  <p>下单时间：{{ item.order.orderCreateTime }}</p>
                  <a
                    @click="
                      routerTo(
                        '/detail/',
                        item.product.productCategory,
                        item.product.productId
                      )
                    "
                  >点击查看商品详细信息</a>
                </div>
                <div class="goods" slot="reference">
                  <!-- <el-image
                    class="img"
                    :src="item.product.productHomeImageUrl"
                  ></el-image>-->
                  <img :src="item.product.productHomeImageUrl" alt />
                  <div class="detail">
                    <h5 style="margin-bottom: 4px;">{{ item.product.productName }}</h5>
                    <span class="s1">{{ item.productSku.productSkuDesc }}</span>
                    <br />
                    <span class="s2">X{{ item.order.orderNumber }}</span>
                  </div>
                  <div class="price">￥{{ item.order.orderAmount }}</div>
                </div>
              </el-popover>
            </div>
          </el-tab-pane>
          <el-tab-pane label="未支付">
            <div>
              <el-popover placement="right" trigger="hover" v-for="(item, i) in data14" :key="i">
                <div class="hover">
                  <a
                    @click="
                      routerTo(
                        '/detail/',
                        item.product.productCategory,
                        item.product.productId
                      )
                    "
                  >点击查看商品详细信息</a>
                  <br />
                  <a @click="cancel(i)">点击取消订单</a>
                </div>
                <div class="goods" slot="reference">
                  <!-- <el-image
                    class="img"
                    :src="item.product.productHomeImageUrl"
                  ></el-image>-->
                  <img :src="item.product.productHomeImageUrl" alt />
                  <div class="detail">
                    <h5 style="margin-bottom: 4px;">{{ item.product.productName }}</h5>
                    <span class="s1">{{ item.productSku.productSkuDesc }}</span>
                    <br />
                    <span class="s2">X{{ item.order.orderNumber }}</span>
                  </div>
                  <div class="price">￥{{ item.order.orderAmount }}</div>
                </div>
              </el-popover>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已取消">
            <div>
              <el-popover placement="right" trigger="hover" v-for="(item, i) in data15" :key="i">
                <div class="hover">
                  <a
                    @click="
                      routerTo(
                        '/detail/',
                        item.product.productCategory,
                        item.product.productId
                      )
                    "
                  >点击查看商品详细信息</a>
                  <br />
                  <a @click="del(item.order.orderId, i)">点击删除订单</a>
                </div>
                <div class="goods" slot="reference">
                  <!-- <el-image
                    class="img"
                    :src="item.product.productHomeImageUrl"
                  ></el-image>-->
                  <img :src="item.product.productHomeImageUrl" alt />
                  <div class="detail">
                    <h5 style="margin-bottom: 4px;">{{ item.product.productName }}</h5>
                    <span class="s1">{{ item.productSku.productSkuDesc }}</span>
                    <br />
                    <span class="s2">X{{ item.order.orderNumber }}</span>
                  </div>
                  <div class="price">￥{{ item.order.orderAmount }}</div>
                </div>
              </el-popover>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="10" style="width:600px;">
        <el-tabs type="border-card" style=" background-color:rgba(250,250,250,0.5)">
          <el-tab-pane label="商品推荐">
            <el-carousel direction="vertical">
              <el-carousel-item v-for="(item, i) in image" :key="i" style="width:600px;">
                <span class="imgspan">{{ item.productName }}</span>
                <el-image
                  @click="
                    routerTo('/detail/', item.productCategory, item.productId)
                  "
                  class="image"
                  :src="item.productHomeImageUrl"
                  fit="contain"
                ></el-image>
              </el-carousel-item>
            </el-carousel>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getMyInfo,
  getAlreadyOrdersByUsername,
  getCancelOrdersByUsername,
  getNonePayOrdersByUsername,
  getNoneSendOrdersByUsername,
  getNoneReceiveOrdersByUsername,
  deleteOrderByOrderId
} from "@/network/profile.js";
import { getProduct } from "@/network/charity.js";

export default {
  data() {
    return {
      num: 1,
      username: "",
      data1: [
        // {
        //   orderCreateTime: "2021-06-30 12:20",
        //   time2: "2021-07-03 15:20",
        //   src:
        //     "https://img2.baidu.com/it/u=3675869675,3329548624&fm=26&fmt=auto&gp=0.jpg",
        //   title: "物品名称",
        //   specs: "300g/1盒",
        //   orderNumber: 1,
        //   orderAmount: "22.5"
        // }
      ],
      data12: [
        // {
        //   orderCreateTime: "2021-06-30 12:20",
        //   place: "xxx地",
        //   orderId: "1",
        //   logistics: [
        //     {
        //       content: "商品已发货",
        //       timestamp: "2018-04-15"
        //     },
        //     {
        //       content: "到达xxx市分拣中心",
        //       timestamp: "2018-04-13"
        //     },
        //     {
        //       content: "正在前往xxx市分拣点",
        //       timestamp: "2018-04-11"
        //     }
        //   ],
        //   src:
        //     "https://img0.baidu.com/it/u=133569279,1429255623&fm=26&fmt=auto&gp=0.jpg",
        //   title: "物品名称",
        //   specs: "约300g/1个",
        //   orderNumber: 2,
        //   orderAmount: "20.9"
        // }
      ],
      data13: [
        // {
        //   orderCreateTime: "2021-06-30 12:20",
        //   d: "#",
        //   orderId: "1",
        //   src:
        //     "https://img2.baidu.com/it/u=414027921,3360102536&fm=224&fmt=auto&gp=0.jpg",
        //   title: "物品名称",
        //   specs: "浅蓝色",
        //   orderNumber: 1,
        //   orderAmount: "102"
        // }
      ],
      data14: [
        // {
        //   orderId: "1",
        //   c: "#",
        //   src:
        //     "https://img0.baidu.com/it/u=3612402013,982327803&fm=26&fmt=auto&gp=0.jpg",
        //   title: "物品名称",
        //   specs: "白色",
        //   orderNumber: 1,
        //   orderAmount: "62.5"
        // },
        // {
        //   orderId: "1",
        //   c: "#",
        //   src:
        //     "https://img1.baidu.com/it/u=325482826,370985844&fm=26&fmt=auto&gp=0.jpg",
        //   title: "物品名称",
        //   specs: "300g/1盒",
        //   orderNumber: 1,
        //   orderAmount: "52.5"
        // }
      ],
      data15: [
        // {
        //   orderId: "1",
        //   c: "#",
        //   src:
        //     "https://img2.baidu.com/it/u=3758616094,217032655&fm=26&fmt=auto&gp=0.jpg",
        //   title: "物品名称",
        //   specs: "水+乳+霜",
        //   orderNumber: 1,
        //   orderAmount: "212.5"
        // }
      ],
      checked: false,
      isIndeterminate: false,
      shopping: [
        {
          id: "1",
          src:
            "https://img2.baidu.com/it/u=3675869675,3329548624&fm=26&fmt=auto&gp=0.jpg",
          title: "物品名称",
          specs: "300g/1盒",
          orderNumber: 1,
          orderAmount: "22.5"
        },
        {
          id: "2",
          src:
            "https://img2.baidu.com/it/u=414027921,3360102536&fm=224&fmt=auto&gp=0.jpg",
          title: "物品名称",
          specs: "浅蓝色,M",
          orderNumber: 1,
          orderAmount: "102"
        }
      ],
      image: [
        // {
        //   id: "1",
        //   src:
        //     "https://img2.baidu.com/it/u=3675869675,3329548624&fm=26&fmt=auto&gp=0.jpg",
        //   title: "物品名称"
        // },
        // {
        //   id: "2",
        //   src:
        //     "https://img2.baidu.com/it/u=414027921,3360102536&fm=224&fmt=auto&gp=0.jpg",
        //   title: "物品名称"
        // }
      ]
    };
  },
  mounted() {},
  created() {
    this.getMyInfo();
    this.getProduct();
  },
  methods: {
    getProduct() {
      getProduct().then(res => {
        // console.log("推荐");
        // console.log(res.payload);
        this.image = res.payload;
      });
    },
    getMyInfo() {
      getMyInfo().then(res => {
        // console.log("username");
        // console.log(res.data.infoVo.username);
        this.username = res.data.infoVo.username;
        getAlreadyOrdersByUsername(this.username).then(res => {
          // console.log("已完成");
          // console.log(res.payload);
          this.data1 = res.payload;
          for (var i in this.data1) {
            this.data1[i].order.orderCreateTime = this.data1[
              i
            ].order.orderCreateTime.split("T")[0];
          }
        });
        getCancelOrdersByUsername(this.username).then(res => {
          // console.log("已取消");
          // console.log(res.payload);
          for (let i = 0; i < res.payload.length; i++)
            if (!res.payload.order.orderShow) {
              res.payload.splice(i, 1);
            }
          this.data15 = res.payload;
        });
        getNonePayOrdersByUsername(this.username).then(res => {
          console.log("未支付");
          console.log(res.payload);
          this.data14 = res.payload;
        });
        getNoneReceiveOrdersByUsername(this.username).then(res => {
          // console.log("运输中");
          // console.log(res.payload);
          this.data12 = res.payload;
          for (var i in this.data1) {
            this.data12[i].order.orderCreateTime = this.data12[
              i
            ].order.orderCreateTime.split("T")[0];
          }
        });
        getNoneSendOrdersByUsername(this.username).then(res => {
          // console.log("未发货");
          // console.log(res.payload);
          this.data13 = res.payload;
          for (var i in this.data1) {
            this.data13[i].order.orderCreateTime = this.data13[
              i
            ].order.orderCreateTime.split("T")[0];
          }
        });
      });
    },
    del(id, i) {
      deleteOrderByOrderId(id).then(res => {
        console.log(res);
        this.data15.splice(i, 1);
      });
    },

    routerTo(routerPath, item, id) {
      console.log(id);
      this.$router.push({
        path: routerPath,
        query: {
          type: "category",
          id: id
        }
      });
    },
    cancel(index) {
      let a = this.data14.splice(index, 1);
      // console.log(a);
      this.data15 = this.data15.concat(a);
      // console.log(this.data15);
    },
    // del(index) {
    //   this.data15.splice(index, 1);
    // },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-tabs--border-card > .el-tabs__header {
  background-color: #f1e3df;
}
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  color: rgb(160, 116, 100);
  font-size: 2.5vh;
}
.medal {
  margin-left: 200px;
  // max-height: 98vh;
  /* width: 85vw; */
  margin-top: 20px;
  overflow: hidden;
  min-width: 800px;
}
h3 {
  margin-bottom: 5px;
  font-size: 3.2vh;
}
.hover {
  font-size: 2.6vh;
}
.hover a {
  text-decoration: underline;
  color: rgb(64, 150, 184);
  font-size: 2.5vh;
  cursor: pointer;
}
.hover .btn {
  text-decoration: underline;
  color: rgb(64, 150, 184);
  font-size: 2.5vh;
  background-color: transparent;
  border: 0;
}
.menu {
  font-size: 2.6vh;
}
.goods {
  display: flex;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 0.5vh solid #ccc;
}
.goods .img {
  // width: 30vh;
  height: 20vh;
}
.goods img {
  width: 150px;
  height: 150px;
}
.goods .detail {
  padding: 5px;
  margin: 5px;
  width: 30vw;
}
.goods h5 {
  font-size: 3vh;
  text-align: center;
}
.goods span {
  font-size: 2.5vh;
  display: inline-block;
}
.goods .s1 {
  border: 1px solid #aaa;
  padding: 4px;
  font-size: 2.2vh;
  margin-left: 1vw;
  margin-top: 0.5vh;
  color: white;
  border-radius: 15%;
  background-color: #aaa;
}
.goods .s2 {
  float: right;
  margin-right: 2vw;
  margin-top: 1vh;
  border: 1px solid #ccc;
  padding: 3px;
  color: white;
  background-color: #ccc;
  border-radius: 10%;
}
.goods .price {
  width: 8vw;
  font-size: 2.8vh;
  color: orangered;
  line-height: 14vh;
  padding: 5px;
}
.imgspan {
  font-size: 2.5vh;
  display: block;
  text-align: center;
}
.image {
  margin-top: 10px;
  cursor: pointer;
  width: 550px;
  height: 300px;
}
</style>
